<style>
    .panel-recharge h3 {
        margin-bottom: 15px;
        margin-top: 10px;
        color: #444;
        font-size: 16px;
    }

    .row-paytype div input {
        display: none;
    }

    .row-paytype img {
        height: 35px;
        margin: 8px;
    }

    .row-paytype label {
        margin-bottom: 0;
        width: 100%;
        display: block;
        cursor: pointer;
        border: 1px solid #efefef;
    }

    .row-paytype label:hover {
        background: rgba(100, 125, 255, 0.13);
        border-color: rgba(100, 125, 255, 0.13);
    }

    .row-paytype label.active {
        border-radius: 3px;
        background: rgba(100, 125, 255, 0.23);
        border: 1px solid rgba(100, 125, 255, 0.23);
    }

    .page-header small {
        margin-top: 15px;
        font-size: 13px;
    }

    .tabbable-panel {
        /*border:1px solid #eee;*/
        padding: 0px;
    }

    .tabbable-line > .nav-tabs {
        border: none;
        margin: 0px;
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		overflow-y: hidden;
    }
	.tabbable-line > .nav-tabs::-webkit-scrollbar {
		display:none
	}

    .tabbable-line > .nav-tabs > li {
        margin-right: 2px;
    }

    .tabbable-line > .nav-tabs > li > a {
        border: 0;
        margin-right: 0;
        color: #737373;
        font-size: 16px;
        font-weight: bold;
    }

    .tabbable-line > .nav-tabs > li > a > i {
        color: #a6a6a6;
    }

    .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
        border-bottom: 3px solid rgba(56, 70, 132, 0.68);
    }

    .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
        border: 0;
        background: none !important;
        color: #333333;
    }

    .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
        color: #a6a6a6;
    }

    .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
        margin-top: 0px;
    }

    .tabbable-line > .nav-tabs > li.active {
        border-bottom: 3px solid #384684;
        position: relative;
    }

    .tabbable-line > .nav-tabs > li.active > a {
        border: 0;
        color: #333333;
    }

    .tabbable-line > .nav-tabs > li.active > a > i {
        color: #404040;
    }

    .tabbable-line > .tab-content {
        margin-top: -3px;
        background-color: #fff;
        border: 0;
        border-top: 1px solid #eee;
        padding: 15px 0;
    }

    .price-item {
        height: 115px;
        padding: 20px 15px;
        margin-bottom: 15px;
        border-radius: 5px;
        width: 100%;
        display: block;
        text-align: center;
        border: 1px solid #efefef;
    }

    .price-item:hover {
        background: rgba(100, 125, 255, 0.13);
        border-color: rgba(100, 125, 255, 0.13);
    }

    .price-item.active {
        border-radius: 3px;
        background: rgba(100, 125, 255, 0.23);
        border: 1px solid rgba(100, 125, 255, 0.23);
    }

    .price-item > .title, .price-item > .subtext {
        color: #444;
        height: 25px;
        line-height: 25px;
    }

    .price-item > .subtext {
        color: #999;
    }

    .price-item > .price {
        height: 30px;
        line-height: 30px;
        color: #fc4c57;
        font-size: 24px;
    }

    .price-item > .price em {
        font-size: 12px;
        font-style: normal;
    }

    .row-paytype div input {
        display: none;
    }

    .row-paytype img {
        margin: 8px;
        vertical-align: inherit;
    }

    .btn-recharge {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        padding: 0;
    }

    .row-rightlist .media .media-left img {
        width: 50px;
        height: 50px;
    }

    .row-rightlist .media .media-heading {
        font-size: 14px;
        margin-top: 5px;
        color: #444;
        font-weight: 500;
    }

    .row-rightlist .media .media-body .text-muted {
        height: 18px;
        overflow: hidden;
    }

    .row-rightlist .media {
        padding: 12px 0;
    }
</style>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default panel-recharge">
                <div class="panel-body">
                    <h2 class="page-header">购买积分
						<span class="pull-right">
							<small class="text-danger">积分余额: {$user.token_balance}</small>
							<small class="text-success">欧卡到期时间: {:date('Y-m-d H:i:s',$user.ohcard_balance)}</small>
						</span>
					</h2>
                    <div class="clearfix"></div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="tabbable-panel">
                                <div class="tabbable-line">
                                    <ul class="nav nav-tabs ">
                                        {foreach name="category" id="item"}
                                        <li class="{if $key==0}active{/if}">
                                            <a href="#tab_vip_{$key}" data-toggle="tab">
                                                {$item.name}
                                            </a>
                                        </li>
                                        {/foreach}
                                    </ul>
									<div class="tab-content" style="padding-top:25px;">
                                        {foreach name="category" id="item"}
                                        <div class="tab-pane {if $key==0}active{/if}" id="tab_vip_{$key}">
											<div class="row row-pricelist">
												{foreach name="item.goods" id="goods"}
												<div class="col-xs-6 col-sm-4 col-md-3">
													<a href="javascript:" class="price-item attr" data-type="goods_id" data-value="{$goods.id}">
														<div class="title">{$goods.name}</div>
														<div class="price"><em>￥</em><b>{$goods.price}</b></div>
														<div class="subtext">{$goods.intro}</div>
													</a>
												</div>
												{/foreach}
											</div>
                                        </div>
                                        {/foreach}
										<h3>支付方式</h3>
										<div class="row row-recharge row-paytype" style="padding:10px 0;">
											<div class="col-xs-6 col-sm-4 col-md-3 text-center">
												<label class="active attr" data-type="paytype" data-value="wechat">
													<img src="__CDN__/assets/addons/epay/images/wechat.png" alt="">
												</label>
											</div>
<!--											<div class="col-xs-6 col-sm-4 col-md-3 text-center">
												<label class="attr" data-type="paytype" data-value="balance">
													<img src="__CDN__/assets/addons/epay/images/balance.png" alt="balance">
												</label>
											</div>-->
										</div>
										<form action="{:url('index/goods/submit')}" method="post" role="form">
											<input type="hidden" name="goods_id" value="">
											<input type="hidden" name="paytype" value="wechat">
											<div class="row row-recharge" style="margin:20px -15px 0 -15px;">
												<div class="col-xs-6 col-sm-4 col-md-4 col-lg-2">
													<input type="submit" class="btn btn-info btn-recharge btn-block" value="立即购买" />
												</div>
											</div>
										</form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>